<template>
  <div>
    收藏:
    <van-switch v-model="checked" style="vertical-align: middle;" @change="changeFn" />
  </div>
</template>

<script>
import { setZXCO,getZXCO } from "../../utils/storage";
export default {
  props: ["id"],
  data() {
    return {
      checked: false
    };
  },
  methods: {
    changeFn() {
      let collectArr = getZXCO()
      if(collectArr.length == 20){
        this.$notify('收藏空间已满，最多可以收藏20个项目');
        this.checked = false
        return
      }
      if (this.checked == true) {
        setZXCO(this.id);
      } else {
        setZXCO(this.id, true);
      }
    }
  },
  mounted() {
    let arr = getZXCO()
    if (arr.indexOf(this.id) >= 0) {
      this.checked = true;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>